<template>
  <div>
      <headerMiddle title="我的收藏"></headerMiddle>
      <div class="item" v-for="(item,index) in collectionList" :key="index">
            <div class="biaoti">
                {{item.title}}
            </div>
            <div class="cover" v-if="item.cover">
                <div class="imgwrapper" v-for="(img,index) in item.cover" :key="index">
                    <img :src="img.url" alt="">
                </div>
            </div>
            <div class="info">
                {{item.user.nickname}} {{item.comments.length}}跟帖
            </div>
        </div>
  </div>
 
</template>

<script>
import headerMiddle from '../components/headerMiddle'
export default {
    components:{
        headerMiddle
    },
    // 创建一个数组来接受发过来的数据
    data(){
        return{
            collectionList:[]
        }
    },
    // 加载页面发送请求，获取数据
    mounted(){
        this.$axios({
            url:'/user_star',
            method:'get',
            headers:{
                 Authorization: localStorage.getItem('token')
            }
        }).then(res=>{
            console.log(res.data);
            this.collectionList = res.data.data;

            // 遍历每一个收藏，然后再遍历每一个收藏里面的图片
            // 如果图片是以http开头，则不需要拼接地址,否则就要
            this.collectionList.forEach(e=>{
                if(e.cover){
                    e.cover.forEach(e=>{
                        if(e.url.indexOf('http')<0){
                            e.url = this.$axios.defaults.URLbase + e.url
                        }
                    })
                }
            })
        })
    }
}
</script>

<style lang="less" scoped>
    .item{
        padding: 5.556vw;
        border-bottom: 1px solid #eeeeee;
    }
    .biaoti{
        font-size: 14px
    }
    .cover{
        display: flex;
        margin-top: 2.778vw;
    }
    .imgwrapper{
        width: 33%;
        height: 22.222vw;
        overflow: hidden;
        img{
            width: 100%;
            height: auto;
        }
    }
    .info {
        margin-top: 2.778vw;
        color: #888;
        font-size: 14px;
    }
</style>